<template>
  <div>
    <div
      v-for="(gy, index) in props.value.length > 0
        ? props.value[props.xuhao].proutingDetails
        : []"
      :key="gy"
    >
      <div class="meiyiceng">
        <div v-if="!gy.isGroup" class="kapian">
          <div class="kp-tou">
            <span>{{ gy.opCode + gy.opName }}</span>
            <el-icon><DeleteFilled @click="delete1(index)" /></el-icon>
          </div>
          <div class="fengexian"></div>
          <div class="text item">
            <div>
              {{ '本道： ' + gy.currentRatio }}
              {{
                props.value.length > 0 ? props.value[props.xuhao].measName : ''
              }}
            </div>
            <div>
              {{ '下道： ' + gy.nextRatio }}
              {{
                props.value.length > 0 ? props.value[props.xuhao].measName : ''
              }}
            </div>
          </div>
        </div>

        <div v-else class="zu">
          <div class="zucaozuo">
            <div class="iconJiajian">
              <el-icon size="15px" style="color: grey">
                <Minus @click="zuDelete(index)" />
              </el-icon>
              <div style="width: 8px"></div>
              <el-icon size="15px" style="color: grey">
                <Plus @click="zuZenjia(index)" />
              </el-icon>
            </div>
            <div class="flag">
              <el-tag v-show="gy.isMerge" closable type="warning">并行</el-tag>
              <el-tag v-show="gy.isHb" closable type="danger">合并</el-tag>
            </div>
          </div>
          <div class="zunekapian">
            <div v-for="(zu1, index1) in gy.childGroup" :key="zu1" class="zuka">
              <div v-if="!zu1.isGroup" class="kapian1">
                <div class="kp-tou">
                  <span>{{ zu1.opCode + zu1.opName }}</span>
                  <div class="zubtn">
                    <el-icon>
                      <DeleteFilled @click="deleteKaNeiZu(index, index1)" />
                    </el-icon>
                    <div style="width: 10px"></div>
                    <el-icon>
                      <Plus @click="zuKaNeiZengjia(index, index1)" />
                    </el-icon>
                  </div>
                </div>
                <div class="fengexian"></div>
                <div class="text item">
                  <div>
                    {{ '本道： ' + zu1.currentRatio }}
                    {{ zu1.measName }}
                  </div>
                  <div>
                    {{ '下道： ' + zu1.nextRatio }}
                    {{ zu1.measName }}
                  </div>
                </div>
              </div>
              <div v-else class="zu1">
                <div class="zucaozuo">
                  <div class="iconJiajian">
                    <el-icon size="15px" style="color: grey">
                      <Minus @click="zuDelete2(index, index1)" />
                    </el-icon>
                    <div style="width: 8px"></div>
                    <el-icon size="15px" style="color: grey">
                      <Plus @click="zuZenjia2(index, index1)" />
                    </el-icon>
                  </div>
                  <div class="flag">
                    <el-tag v-show="zu1.isMerge" closable type="warning">
                      并行
                    </el-tag>
                    <el-tag v-show="zu1.isHb" closable type="danger">
                      合并
                    </el-tag>
                    <!-- <el-tag v-show="zu1.isMerge" closable type="warning">
                      并行组
                    </el-tag>
                    <el-tag v-show="zu1.isHb" closable type="danger">
                      合并组
                    </el-tag> -->
                  </div>
                </div>
                <div class="zunekapian">
                  <div
                    v-for="(zu2, index2) in zu1.childGroup"
                    :key="zu2"
                    class="zuka"
                  >
                    <div v-if="!zu2.isGroup" class="kapian1">
                      <div class="kp-tou">
                        <span>{{ zu2.opCode + zu2.opName }}</span>
                        <div class="zubtn">
                          <el-icon>
                            <DeleteFilled
                              @click="deleteKaNeiZu2(index, index1, index2)"
                            />
                          </el-icon>
                          <div style="width: 10px"></div>
                          <el-icon>
                            <Plus
                              @click="zuKaNeiZengjia2(index, index1, index2)"
                            />
                          </el-icon>
                        </div>
                      </div>
                      <div class="fengexian"></div>
                      <div class="text item">
                        <div>
                          {{ '本道： ' + zu2.currentRatio }}
                          {{ zu2.measName }}
                        </div>
                        <div>
                          {{ '下道： ' + zu2.nextRatio }}
                          {{ zu2.measName }}
                        </div>
                      </div>
                    </div>
                    <div v-else>我是小傻</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fengexiand"></div>
    </div>
    <div class="dijb">
      <div class="dijiabiao button1" @click="dibuZengjia">
        <el-icon size="50px" style="color: grey"><Plus /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { DeleteFilled, Plus, Minus } from '@element-plus/icons-vue'
  import { gongxuStore } from '@/store/modules/gongxu'
  const $baseMessage = inject('$baseMessage')

  const props = defineProps({
    value: {
      type: Array,
      default() {
        return []
      },
    },
    xuhao: {
      type: Number,
      default() {
        return 0
      },
    },
  })

  const zuDelete2 = (index, index1) => {
    let gxs = props.value
    let xh = props.xuhao
    if (
      gxs[xh].proutingDetails[index].childGroup[index1].childGroup.length === 0
    ) {
      gxs[xh].proutingDetails[index].childGroup.splice(index1, 1)
    } else {
      $baseMessage('当心！当前组内有内容，无法删除。', 'error')
    }
  }

  const zuDelete = (index) => {
    let gxs = props.value
    let xh = props.xuhao
    if (gxs[xh].proutingDetails[index].childGroup.length === 0) {
      gxs[xh].proutingDetails.splice(index, 1)
    } else {
      $baseMessage('当心！当前组内有内容，无法删除。', 'error')
    }
  }

  const zuKaNeiZengjia2 = (index, index1) => {
    // $baseMessage('标准版最多支持3级，若想更多请咨询企业版！', 'warning')
    gxs[xh].proutingDetails[index].childGroup[index1].push(
      gongxuStore().getGongxu
    )
  }

  const deleteKaNeiZu2 = (index, index1, index2) => {
    let gxs = props.value
    let xh = props.xuhao
    gxs[xh].proutingDetails[index].childGroup[index1].childGroup.splice(
      index2,
      1
    )
  }

  const zuZenjia2 = (index, index1) => {
    if (gongxuStore().getGongxu.opName === undefined) {
      $baseMessage('右侧工序维护操作总得锁定点什么吧！', 'error')
      return
    }
    let gxs = props.value
    let xh = props.xuhao

    gxs[xh].proutingDetails[index].childGroup[index1].childGroup.push(
      gongxuStore().getGongxu
    )
  }

  const zuZenjia = (index) => {
    let gxs = props.value
    let xh = props.xuhao
    if (gongxuStore().getGongxu.isGroup) {
      let map = {
        isMerge: gongxuStore().getGongxu.isMerge,
        isHb: gongxuStore().getGongxu.isHb,
        isGroup: true,
        childGroup: [],
      }
      gxs[xh].proutingDetails[index].childGroup.push(map)
    } else {
      if (gongxuStore().getGongxu.opName === undefined) {
        $baseMessage('右侧工序维护操作总得锁定点什么吧！', 'error')
        return
      }
      gxs[xh].proutingDetails[index].childGroup.push(gongxuStore().getGongxu)
    }
  }

  const deleteKaNeiZu = (index, index1) => {
    let gxs = props.value
    let xh = props.xuhao
    gxs[xh].proutingDetails[index].childGroup.splice(index1, 1)
  }

  const zuKaNeiZengjia = (index, index1) => {
    let gxs = props.value
    let xh = props.xuhao

    if (gongxuStore().getGongxu.isGroup) {
      let map = {
        isMerge: gongxuStore().getGongxu.isMerge,
        isHb: gongxuStore().getGongxu.isHb,
        isGroup: true,
        childGroup: [],
      }
      gxs[xh].proutingDetails[index].childGroup.splice(index1 + 1, 0, map)
    } else {
      gxs[xh].proutingDetails[index].childGroup.splice(
        index1 + 1,
        0,
        gongxuStore().getGongxu
      )
    }
  }

  const dibuZengjia = () => {
    let gxs = props.value
    let xh = props.xuhao
    if (gxs[xh] === undefined) {
      $baseMessage('请先查询一个物料', 'warning')
      return
    }
    if (gongxuStore().getGongxu.isGroup) {
      let map = {
        isMerge: gongxuStore().getGongxu.isMerge,
        isHb: gongxuStore().getGongxu.isHb,
        isGroup: true,
        childGroup: [],
      }
      gxs[xh].proutingDetails.push(map)
    } else {
      if (gongxuStore().getGongxu.opName === undefined) {
        $baseMessage('右侧工序维护操作总得锁定点什么吧！', 'error')
        return
      }
      gxs[xh].proutingDetails.push(gongxuStore().getGongxu)
    }
  }

  const delete1 = (index) => {
    let gxs = props.value
    let xh = props.xuhao
    gxs[xh].proutingDetails.splice(index, 1)
  }
</script>

<style lang="scss" scoped>
  .iconJiajian {
    display: flex;
    flex-direction: row;
  }
  .zucaozuo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 200px;
    margin-bottom: 12px;
  }
  .zunekapian {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .zubtn {
    display: flex;
    justify-content: space-around;
  }
  .zujiabiao {
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 1px solid #e4e7ed;
    border-style: dotted;
    transition-duration: 0.4s;
  }
  .button2 {
    color: black;
    background-color: #ccffff;
    border: 2px solid #ccffff;
  }

  .button2:hover {
    color: white;
    background-color: #4caf50;
  }
  .button1 {
    color: black;
    background-color: white;
    border: 2px solid #4caf50;
  }

  .button1:hover {
    color: white;
    background-color: #4caf50;
  }
  .dijb {
    display: flex;
    justify-content: center;
  }
  .dijiabiao {
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 15px;
    width: 90px;
    height: 90px;
    cursor: pointer;
    border: 1px solid #e4e7ed;
    border-style: dotted;
    transition-duration: 0.4s;
  }
  .zuka {
    flex: 1;
    margin-left: 10px;
  }
  .zu1 {
    padding: 10px;
    margin-left: 20px;
    overflow-x: auto;

    background-color: #ccffff;

    border-bottom: 1px solid #9257bd;
    border-left: 6px solid #9257bd;
    // display: flex;
    // flex-direction: row;
    // justify-content: flex-start;
    border-radius: 9px;
  }
  .zu {
    padding: 10px;
    overflow-x: auto;
    background-color: #ccffff;
    border-bottom: 1px solid #b6c0eb;
    border-left: 6px solid #b6c0eb;
    // display: flex;
    // flex-direction: row;
    // justify-content: flex-start;
    border-radius: 9px;
  }
  .fengexiand {
    margin: 20px 0 20px 0;
    border: 0.5px solid #e4e7ed;
  }
  .fengexian {
    margin: 10px 0 10px 0;
    border: 0.5px solid #e4e7ed;
  }
  .item {
    display: flex;
    justify-content: space-between;
    padding: 0px 15px 10px 15px;
  }
  .kp-tou {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 0 15px;
  }
  .kapian1 {
    width: 200px;
    border: 1px solid #e4e7ed;
    border-radius: 9px;
    box-shadow: 5px 5px 2.5px #ffffff;
  }
  .kapian {
    width: 200px;
    border: 1px solid #e4e7ed;
    border-radius: 9px;
    box-shadow: 5px 5px 2.5px #f3f3f3;
  }
  .bodyStyle {
    padding: 1px;
  }
  .meiyiceng {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    width: 200px;
    height: 120px;
    margin: 10px;
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .text {
    font-size: 12px;
  }

  .box-card {
    width: 200px;
  }
</style>
